<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <!-- <script src="./lib/coffee-script.js"></script> -->
  <script src="./lib/d3.min.js"></script>
  <script src="./lib/simplify.js"></script>
  <script src="./src/index.js" ></script>
  <script src="./src/largestRect.js" ></script>
</head>
<style>
  .disabled {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
    color: black;
  }
  
  .disabled:hover {
    color: black;
  }
  </style>
<body>
  <strong>Country: </strong>
  <a href="javascript:void(0);" class="playback" id="prev-country">Prev</a> | <select id="select-country"></select> | <a href="javascript:void(0);" class="playback" id="next-country">Next</a>
  <br/>
  <strong>Playback: </strong><a href="javascript:void(0);" id="play">Play</a> | <a href="javascript:void(0);" class="playback" id="restart">Restart</a> | <a href="javascript:void(0);" id="next-step">Next step</a>
  <br/>
  <strong>Animation: </strong> Fast <input id="slider" type="range" min="1" max="10" step="0.1" value="2"/> Slow
  <hr/>
  <svg id="svg" name="svg"></svg>
</body>
</html>